<template>
	<view>
		<view class="top">
			<u-avatar :src="user.src" shape="circle" size="55"></u-avatar>
			<view class="info">
				<text class="info1">{{user.name}}</text>
				<text class="info2">{{user.position}} - {{user.phone}}</text>
			</view>
		</view>
		<view class="content">
			<view class="item" @click="demo(1)">
				<text>修改退款密码</text>
				<text>&gt;</text>
			</view>
			<view class="item" @click="demo(2)">
				<text>修改结算信息</text>
				<text>&gt;</text>
			</view>
			<view class="item" @click="demo(3)">
				<text>绑定新商户</text>
				<text>&gt;</text>
			</view>
			<view class="item" @click="demo(4)">
				<text>切换商户</text>
				<text>&gt;</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					src: '',
					name: '张三',
					position: '负责人',
					phone: '12345636676'
				}
			};
		},

		methods: {
			demo(e) {
				switch (e) {
					case 1:
						uni.navigateTo({
							url: "/pages/user/editPassword",
						})
						break;
					case 2:
						console.log('修改结算信息')
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/user/binding",
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/user/change",
						})
						break;
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		// flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		height: 250rpx;
		// line-height: 350rpx;
		background-color: #00a743;
		color: #fff;

		.info {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.info1 {
				font-weight: bolder;
			}

			.info2 {
				margin-top: 20rpx;
				font-size: 10rpx;
			}
		}
	}

	.content {
		.item {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 150rpx;
			border-bottom: 1px solid #afafaf;
			line-height: 150rpx;
			font-size: 30rpx;

			.blue {
				color: blue;
			}
		}
	}
</style>